import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Modal, Select, Row, Col } from 'antd'
import { transactionTypeData, paymentType } from 'utils/seletLocalData'
import { validateNumber, SelectProps } from 'utils'
import styles from '../../../themes/detail.less'
import stylesone from './modal.less'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
}
// 将select框的id转为name
const chosedname = {}
const DetailModal = ({
  item = {},
  onOk,
  detailModalType,
  basicInfo,
  transaction,
  transactionSelected,
  handleSelected,
  TransactionInfoVisible,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optionData,
  ...modalProps
}) => {
  const item1 = {}
  const item2 = { ...item1, ...item }
  transactionSelected = transactionSelected[0] || {}
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const toFrom = (detailModalType === 'toModal') ? '0' : '1'
      let valueData = getFieldsValue()
      let arrive = {}
      let pay = {}
      let data = {}
      if (detailModalType === 'threeTransactionModal') {
        for (let o in valueData) {
          if (o.indexOf('arrive') !== -1) {
            let key = o.replace('arrive', '')
            arrive[key] = valueData[o]
          } else if (o.indexOf('pay') !== -1) {
            let key = o.replace('pay', '')
            pay[key] = valueData[o]
          }
        }
        data = { arrive, pay, id2: transactionSelected.id }
      } else {
        data = {
          ...valueData,
          ...basicInfo,
          id: item2.id || 1,
          toFrom: toFrom,
          transactionId: item2.transactionId || 1,
        }
      }

      onOk(data)
    })
  }
  // 获取选择框的lable值
  const handleChange = (type, value) => {
    chosedname[type] = value.label
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const customerAccountOption = optionData.customerAccount.map(d => <Option key={d.accountId}>{d.name}</Option>)
  const customerEntityOption = optionData.customerEntity.map(d => <Option key={d.entityId}>{d.name}</Option>)
  const transactionTypeOption = transactionTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  const paymentTypeOption = paymentType.map(d => <Option key={d.key}>{d.value}</Option>)
  const companyAccountOption = optionData.companyAccount.map(d => <Option key={d.companyAccountId}>{d.name}</Option>)
  const fundsTypeDataOption = optionData.fundsTypeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const transactionOptions = transaction.map(d => <Option key={d.id}>{`${d.firstName + d.middleName + d.lastName}/amountLocal:${d.amountLocal}/transactionDate:${d.dateTransaction}`}</Option>)
  const formData = { ...getFieldsValue() }
  let key = {
    typeKey: '',
    arrivetypeKey: '',
    paytypeKey: '',
  }
  const { type, arrivetype, paytype } = formData
  if (detailModalType !== 'threeTransactionModal') {
    type && (key.typeKey = type)
  } else {
    arrivetype && (key.arrivetypeKey = arrivetype)
    paytype && (key.paytypeKey = paytype)
  }
  const handleSelect = (value) => {
    transactionSelected = transaction.filter((currentValue) => {
      return parseInt(currentValue.id, 10) === parseInt(value, 10)
    })
    handleSelected({ transactionSelected, TransactionInfoVisible: true })
  }
  const createArrivePayFromToClient = (createType) => {
    let amountType = ''
    if (createType === 'pay' || detailModalType === 'paysModal') {
      amountType = 'amount'
    } else {
      amountType = 'foreignAmount'
    }
    return (
      <div>
        <FormItem label="Type" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}type`, {
            initialValue: item2.type,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }}>{transactionTypeOption}</Select>)}
        </FormItem>
        <FormItem label="Payment" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}payment`, {
            initialValue: item2.payment,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }}>{key[`${createType}type`] === '1' ? <Option key={'1'}>Cash</Option> : paymentTypeOption}</Select>)}
        </FormItem>
        {key[`${createType}typeKey`] === '3' ? <FormItem label="Entity" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}entityId`, {
            initialValue: item2.entityId,
          })(<Select style={{ width: '100%' }}>{customerEntityOption}</Select>)}
        </FormItem> : ''}
        {key[`${createType}typeKey`] === '2' ? <FormItem label="Account" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}accountId`, {
            initialValue: item2.accountId,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }}>{customerAccountOption}</Select>)}
        </FormItem> : ''}
        <FormItem label="CompanyAccount" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}companyAccountId`, {
            initialValue: item2.companyAccountId && item2.companyAccountId.toString(),
          })(<Select style={{ width: '100%' }}>{companyAccountOption}</Select>)}
        </FormItem>
        <FormItem label="Amount" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}${amountType}`, {
            initialValue: item2[amountType],
            rules: [
              {
                required: true,
              },
              {
                validator: validateNumber,
              },
            ],
          })(<InputNumber style={{ width: '100%' }} />)}
        </FormItem>
        <FormItem label="fundsCode" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}fundsCode`, {
            initialValue: item2.fundsCode,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }} {...SelectProps}>{fundsTypeDataOption}</Select>)}
        </FormItem>
        <FormItem label="Comments" hasFeedback {...formItemLayout}>
          {getFieldDecorator(`${createType}fundsComment`, {
            rules: [{ required: true }],
            initialValue: item2.fundsComment,
          })(<TextArea rows={4} />)}
        </FormItem>
      </div>
    )
  }
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        {
          (detailModalType !== 'threeTransactionModal') ? createArrivePayFromToClient('') : <div>
            <div className={styles.title}>Arrive</div>
            {
              createArrivePayFromToClient('arrive')
            }
            <div className={styles.title}>TransactionInfo</div>
            <FormItem label="Transaction" hasFeedback {...formItemLayout}>
              {getFieldDecorator('Transaction', {
              })(<Select {...SelectProps} onSelect={handleSelect}>{transactionOptions}</Select>)}
            </FormItem>
            {
              TransactionInfoVisible && <div>
                <FormItem label="name" {...formItemLayout}>
                  <Input value={(transactionSelected.firstName + transactionSelected.middleName + transactionSelected.lastName) || ''} disabled />
                </FormItem>
                <FormItem label="amountLocal" {...formItemLayout}>
                  <Input value={transactionSelected.amountLocal} disabled />
                </FormItem>
                <FormItem label="transactionNumber" {...formItemLayout}>
                  <Input value={transactionSelected.transactionNumber} disabled />
                </FormItem>
                <FormItem label="transactionDate" {...formItemLayout}>
                  <Input value={transactionSelected.dateTransaction} disabled />
                </FormItem>
              </div>
            }
            <div className={styles.title}>pay</div>
            {
              createArrivePayFromToClient('pay')
            }
          </div>
        }
      </Form>
    </Modal>
  )
}

DetailModal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  detailModalType: PropTypes.string,
  onOk: PropTypes.func,
  optionData: PropTypes.object,
}

export default Form.create()(DetailModal)
